<template>
    <div class="playlist-section" @mouseenter="showButtons = true" @mouseleave="showButtons = false">
        <div class="playlist-header">
            <h2>热门歌单</h2>
            <span class="more-tag" @click="handleMoreClick">更多</span>
        </div>
        <div class="playlist-carousel">
            <button class="carousel-btn prev-btn" @click="scrollLeft" v-show="showButtons">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M15 18L9 12L15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </button>
            <div class="playlist-grid" ref="playlistGrid">
                <slot></slot>
            </div>
            <button class="carousel-btn next-btn" @click="scrollRight" v-show="showButtons">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </button>
        </div>
        <div class="page-indicator">
            <span 
                v-for="(_, index) in pageCount" 
                :key="index" 
                class="dot" 
                :class="{ active: currentPage === index }">
            </span>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, nextTick, computed } from 'vue';
import { useRouter } from 'vue-router';

const playlistGrid = ref(null);
const scrollPosition = ref(0);
const maxScrollPosition = ref(0);
const showButtons = ref(false);

const router = useRouter();

const handleMoreClick = () => {
    router.push('/songlist');
    // 确保跳转后滚动到页面顶部
    setTimeout(() => {
        window.scrollTo(0, 0);
    }, 100);
};

const updateScrollLimits = () => {
    if (playlistGrid.value) {
        const container = playlistGrid.value;
        nextTick(() => {
            maxScrollPosition.value = Math.max(0, container.scrollWidth - container.clientWidth);
        });
    }
};

const scrollLeft = () => {
    if (playlistGrid.value) {
        if (scrollPosition.value <= 0) {
            playlistGrid.value.scrollTo({
                left: maxScrollPosition.value,
                behavior: 'smooth'
            });
            scrollPosition.value = maxScrollPosition.value;
        } else {
            const scrollAmount = 1190; // 5个模块的宽度
            const newPosition = Math.max(0, scrollPosition.value - scrollAmount);
            playlistGrid.value.scrollTo({
                left: newPosition,
                behavior: 'smooth'
            });
            scrollPosition.value = newPosition;
        }
    }
};

const scrollRight = () => {
    if (playlistGrid.value) {
        if (scrollPosition.value >= maxScrollPosition.value) {
            playlistGrid.value.scrollTo({
                left: 0,
                behavior: 'smooth'
            });
            scrollPosition.value = 0;
        } else {
            const scrollAmount = 1190; // 5个模块的宽度
            const newPosition = Math.min(maxScrollPosition.value, scrollPosition.value + scrollAmount);
            playlistGrid.value.scrollTo({
                left: newPosition,
                behavior: 'smooth'
            });
            scrollPosition.value = newPosition;
        }
    }
};

const handleScroll = () => {
    if (playlistGrid.value) {
        scrollPosition.value = playlistGrid.value.scrollLeft;
    }
};

const pageCount = computed(() => {
    if (maxScrollPosition.value === 0) return 1;
    return Math.ceil(maxScrollPosition.value / 1190)+1;
});

const currentPage = computed(() => {
    if (maxScrollPosition.value === 0) return 0;
    return Math.round(scrollPosition.value / 1190);
});

onMounted(() => {
    nextTick(() => {
        setTimeout(() => {
            updateScrollLimits();
        }, 100);
        
        if (playlistGrid.value) {
            playlistGrid.value.addEventListener('scroll', handleScroll);
        }
        window.addEventListener('resize', updateScrollLimits);
        
        if (playlistGrid.value) {
            const observer = new ResizeObserver(() => {
                updateScrollLimits();
            });
            observer.observe(playlistGrid.value);
        }
    });
});
</script>

<style scoped>
.playlist-section {
    margin-bottom: 40px;
}

.playlist-section h2 {
    color: white;
    margin-bottom: 20px;
    font-size: 24px;
    padding-left: 100px;
    white-space: nowrap;
    min-width: 200px;
}

.playlist-section .more-tag {
    color: gray;
    cursor: pointer;
    display: flex;
    align-items: center;
    white-space: nowrap;
    margin-top: -15px;
    width: 40px;
    height: 40px;
}

.playlist-section .more-tag:hover {
    color: red;
}

.playlist-section .playlist-header {
    display: flex;
    align-items: center;
    gap: 1041px;
}

.playlist-carousel {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0px;
    padding-left: 85px;
    padding-right: 85px;
}

.carousel-btn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
    z-index: 10;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.carousel-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-50%) scale(1.1);
}

.carousel-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.prev-btn {
    left: 30px;
}

.next-btn {
    right: 30px;
}

.playlist-grid {
    display: flex;
    gap: 20px;
    overflow-x: hidden;
    scroll-behavior: smooth;
    flex: 1;
    padding: 10px 0;
    flex-shrink: 0;
    margin-left: 10px;
    min-width: 1200px;
}

.page-indicator {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
}

.dot.active {
    background-color: white;
}

.playlist-grid > * {
    flex-shrink: 0;
}
</style>